<template>
	<div class="calendar_todo">
		<div class="calendar_com">
			<el-calendar ref="calendar" size="mini" v-model="state.nowDate">
				<template #header="{ date }">
					<div style="display: flex; align-items: center">
						<span></span>
						<span>{{ date }}</span>
						<el-button-group class="m-l10">
							<el-button size="small" @click="selectDate('prev-year')">
								上一年
							</el-button>
							<el-button size="small" @click="selectDate('prev-month')">
								上一月
							</el-button>
							<el-button size="small" @click="selectDate('today')"
								>今天</el-button
							>
							<el-button size="small" @click="selectDate('next-month')">
								下一月
							</el-button>
							<el-button size="small" @click="selectDate('next-year')">
								下一年
							</el-button>
						</el-button-group>
					</div>
				</template>
			</el-calendar>
			<!-- 更多事项 -->
			<div class="btn">
				<el-button @click="moreEventHandler" type="primary" size="small">
					更多事项
				</el-button>
			</div>
			<!-- 任务&日历&项目列表 -->
			<div class="projectList" v-if="props.taskAndprojectList.length > 0">
				<div
					class="taskcalendar"
					v-for="item in props.taskAndprojectList"
					:key="item"
					@click="routePush(item)"
				>
					<div class="svg_sty">
						<svg-icon v-if="!item.hy" icon-class="project_And_task" />
						<svg-icon v-else icon-class="project_proference" />
						<!-- svg -->
					</div>
					<!-- main -->
					<div class="marin_text">
						<div class="dis">
							<div class="name">{{ item.itemName }}</div>
							<div>
								<div>
									<el-button type="primary" size="small">
										{{ item.projectName }}
									</el-button>
								</div>
							</div>
						</div>
						<div class="taskName">{{ item.projectTaskName }}</div>
						<div class="timeName">
							计划实施范围:{{ item.planStartTime }}-{{ item.planEndTime }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import { ElButton, ElCalendar, ElButtonGroup } from "element-plus";
import { useRouter } from "vue-router";

const props = defineProps({
	itemInfo: {},
	nowDate: "",
	taskAndprojectList: [],
});
const state = reactive({
	nowDate: new Date(),
});
let router = useRouter();
const calendar = ref();
const selectDate = (val) => {
	calendar.value.selectDate(val);
};
function filters(jobType = "") {
	// 1任务指派2质量监督巡检3节点前置/后置4任务预警/督办5项目任务审核
	let str = "";
	switch (jobType) {
		case "1":
			str = "任务指派";
			break;
		case "2":
			str = "质量监督巡检";
			break;
		case "3":
			str = "节点前置/后置";
			break;
		case "4":
			str = "任务预警/督办";
			break;
		case "5":
			str = "项目任务审核";
			break;

		default:
			break;
	}
	return str;
}

const emits = defineEmits(["nowDate"]);
const routePush = (row) => {
	router.push({
		path: `/constructionProjectManage/projectImplementationTask/taskExecution/projectTaskId=${row.projectTaskId}`,
	});
};
defineExpose({
	state,
});
watch(
	() => state.nowDate,
	(val) => {
		emits("nowDate", val);
	}
);
// const taskAndprojectList = ref([
//   {
//     name: '李维',
//     time: '2021.06.06 00:00:00',
//     peofercence: '创建了项目会议 立项会议',
//     info: '成都公园改造项目'
//   },
//   {
//     name: '李维',
//     time: '2021.06.06 00:00:00',
//     peofercence: '创建了项目会议 立项会议',
//     info: '成都公园改造项目'
//   },
//   {
//     name: '李维',
//     time: '2021.06.06 00:00:00',
//     peofercence: '创建了项目会议 立项会议',
//     info: '成都公园改造项目'
//   },
//   {
//     name: '张三',
//     time: '2022.06.08 00:00:00',
//     peofercence: '项目会议 立项会议',
//     info: '温江公园改造项目'
//   },
//   {
//     name: '张三',
//     time: '2022.06.08 00:00:00',
//     peofercence: '项目会议 立项会议',
//     info: '温江公园改造项目'
//   },
//   {
//     name: '张三',
//     time: '2022.06.08 00:00:00',
//     peofercence: '项目会议 立项会议',
//     info: '温江公园改造项目'
//   },
//   {
//     name: '张三',
//     time: '2022.06.08 00:00:00',
//     peofercence: '项目会议 立项会议',
//     info: '温江公园改造项目'
//   },
//   {
//     name: '张三',
//     time: '2022.06.08 00:00:00',
//     peofercence: '项目会议 立项会议',
//     info: '温江公园改造项目'
//   }
// ])
const moreEventHandler = () => {
	router.push(`/constructionProjectManage/ProjectImplementationTask`);
};
</script>

<style lang="scss" scoped>
@import "./calendar_and_todoList.scss";
</style>
